#{extends 'main.html' /}
#{set title:'Photo' /}
#{set 'moreScripts'}
#{script 'photo.js'/}
#{/set}	
#{stylesheet 'photo.css'/}
<div id="photo">

					<h2 align="center">Photos</h2>
					<div id="photo_list" align="center"  style="width:510px ;margin:0 auto">
						#{list items:photos, as:'photo'}
							<img src="/public/DataOfImages/${photo}"/>
						 #{/list}
						 #{else}<h3 align="center">There are no photo</h3>#{/else}
						 <div class="cleaner"></div>
							
					</div>
					#{if isMe}
						<div align="center" id="add_photo" style="margin-top: 15px;" >
								    #{form @Photo.addphoto(), enctype:'multipart/form-data'}
									   <input type="file" name="photo">
									   <input type="submit" name="submit" value="Upload">
									#{/form}
						</div>
						#{/if}
						<div id="backgr" style="width: 100%;height: 100%;position: fixed; background-color:black;left: 0;top: 0;display: none;opacity:0.7" ></div>
						<div align="center" id="photo-temp-wrap" >
							<a id="leftsid" title="Previous"></a>							
							<img  style="border:2px solid black; width: 50%;height: 50%" src="/public/images/temp.jpg"/>
							<a id="rightsid" title="Next"></a>
							<a class="gallerbutton1" id="close" style="position:absolute; top:-1%;margin-left:0%;" title="Close"></a>
							<a class="gallerbutton" id="setprimary" style="position:absolute; top:5%;margin-left:1%;" title="Set Primary"></a>
							<a class="gallerbutton3" id="deletephoto" style="position:absolute; top:12%;margin-left:0%;" title="Delete Photo"></a>
						</div>
</div>